<script setup>
import { ref } from 'vue';
import DefaultLayout from '../layouts/DefaultLayout.vue'
import * as DashboardApi from '../apis/dashboard.ts'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user.ts';
import { useNavbarStore } from '../store/navbar.ts';

const dogList = ref([])
const catList = ref([])
const petSupplies = ref([])
const router = useRouter()
const userStore = useUserStore()
const navbarStore = useNavbarStore()

const getDashboardData = () => {
    DashboardApi.getData()
        .then((res) => {
            dogList.value = res.dog
            catList.value = res.cat
            petSupplies.value = res.petSupplies
        })
        .catch((res) => {
            console.log(res)
        })
}
getDashboardData()

const toDetail = (goodsId) => {
    router.push(`/goods/detail/${goodsId}`)
}

const toUserInfo = () => {
    router.push({name: 'UserInfo'})
}

const loginOrRegister = () => {
    userStore.modalVisible = true
}

</script>

<template>
    <DefaultLayout>
        <div class="mx-40 my-8">
            <div class="grid grid-cols-9 gap-14">
                <div class="user_card col-span-2 bg-white shadow w-full mt-40 rounded-xl">
                    <div class="flex flex-col justify-around items-center w-full h-full">
                        <img class="rounded-full w-20 h-20 mt-6" src="..\assets\image\avatar.png" />
                        <p>
                            Hi! &nbsp {{ userStore.username }} 你好
                        </p>
                        <div v-if="!userStore.isLogin" class="flex justify-center gap-4 mb-4">
                            <button class="bg-[#dc2626] text-white px-3 py-1 rounded-md hover:opacity-75 transition duration-300 ease-in-out" @click="loginOrRegister">
                                <p>登录 / 注册</p>
                            </button>
                        </div>
                        <div v-else>
                            <div class="flex justify-around gap-6">
                                <div
                                    class="flex flex-col justify-center gap-2 items-center hover:fill-[#dc2626] hover:text-red-500 cursor-pointer transition duration-300 ease-in-out"
                                    @click="toUserInfo"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="w-5 h-5 ">
                                        <path
                                            d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
                                    </svg>
                                    <p class="text-xs">地址管理</p>
                                </div>
                                <div
                                    class="flex flex-col justify-center gap-2 items-center hover:fill-[#dc2626] hover:text-red-500 cursor-pointer transition duration-300 ease-in-out"
                                    @click="toUserInfo"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="w-5 h-5 ">
                                        <path
                                            d="M512 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H512zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM208 256a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16H304c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80H176zM376 144c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24H376zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24H376z" />
                                    </svg>
                                    <p class="text-xs">我的订单</p>
                                </div>
                                <div
                                    class="flex flex-col justify-center gap-2 items-center hover:fill-[#dc2626] hover:text-red-500 cursor-pointer transition duration-300 ease-in-out"
                                    @click="router.push({name: 'ShoppingCart'})"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="w-5 h-5 ">
                                        <path
                                            d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z" />
                                    </svg>
                                    <p class="text-xs">购物车</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <el-carousel class="col-start-3 col-end-10" height="400px" indicator-position="outside">
                    <el-carousel-item v-for="item in 4" :key="item" class="h-full">
                        <img :src="'src/assets/image/carousel' + item + '.png'" class="w-full h-full object-cover" />
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="w-full py-3 flex items-center">
                <div class="w-2 h-9 bg-red-600 rounded-lg"></div>
                <div class="text-xl font-bold ml-4"> 宠物狗狗 </div>
            </div>
            <div class="grid grid-cols-5 bg-white w-full">
                <div class="col-span-1 h-full">
                    <div class="bg-[#99a9bf] h-full flex justify-center items-center">
                        <img src="../assets/image/sideImage1.webp">

                    </div>
                </div>

                <div class="col-span-4 grid grid-cols-4">
                    <div v-for="item in dogList" :key="item" class="border border-r-2 p-6 hover:border-red-500 transition duration-300 ease-in-out cursor-pointer"
                        @click="toDetail(item.goodsId)">
                        <div class="h-48 flex justify-center items-center">
                            <img class="rounded-lg" :src="item.goodsPhoto" />
                        </div>
                        <p class="text-center mt-2">{{ item.goodsName }}</p>
                        <p class="text-center text-red-500">¥ {{ item.minPrice }}</p>
                    </div>
                </div>
            </div>

            <div class="w-full py-3 flex items-center mt-7">
                <div class="w-2 h-9 bg-red-600 rounded-lg"></div>
                <div class="text-xl font-bold ml-4"> 宠物猫猫 </div>
            </div>
            <div class="grid grid-cols-5 bg-white w-full">
                <div class="col-span-1 h-full">
                    <div class="bg-[#99a9bf] h-full flex justify-center items-center">
                        <img src="../assets/image/sideImage2.webp">
                    </div>
                </div>

                <div class="col-span-4 grid grid-cols-4">
                    <div v-for="item in catList" :key="item" class="p-6 border-2 hover:border-red-500 transition duration-300 ease-in-out cursor-pointer"
                        @click="toDetail(item.goodsId)">
                        <div class="h-48 flex justify-center items-center">
                            <img class="rounded-lg" :src="item.goodsPhoto" />
                        </div>
                        <p class="text-center mt-2">{{ item.goodsName }}</p>
                        <p class="text-center text-red-500">¥ {{ item.minPrice }}</p>
                    </div>
                </div>
            </div>

            <div class="w-full py-3 flex items-center mt-7">
                <div class="w-2 h-9 bg-red-600 rounded-lg"></div>
                <div class="text-xl font-bold ml-4"> 宠物用品 </div>
            </div>
            <div class="grid grid-cols-5 w-full gap-6">
                <div v-for="item in petSupplies" :key="item" class="p-6 border-2 bg-white hover:border-red-500 transition duration-300 ease-in-out cursor-pointer"
                    @click="toDetail(item.goodsId)">
                    <div class="h-48 flex justify-center items-center">
                        <img class="rounded-lg" :src="item.goodsPhoto" />
                    </div>
                    <p class="text-center mt-2">{{ item.goodsName }}</p>
                    <p class="text-center text-red-500">¥ {{ item.minPrice }}</p>
                </div>
            </div>

        </div>
    </DefaultLayout>
</template>

<style scoped>
.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.user_card {
    height: 15rem;
}
</style>